@import './mixins.less';
html, body {
    height: 100%;
    width: 100%;
   .beautyScrollbar();
}
// 一些公共 class 类
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
iframe {
    border: none;
}

* {
    -webkit-overflow-scrolling: touch;
    font-family: inherit;
    // box-sizing: inherit;
    box-sizing: border-box;
}

:not(:root).spinner,
foreignObject,
img,
marker,
pattern,
symbol {
    border-radius: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none
}

a {
    outline: none;
    text-decoration: none
}

a:active {
    opacity: .5
}

//   自定义滚动条样式
.beauty-scrollbar {
   .beautyScrollbar();
}

// 布局
.flex {
    display: flex;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

.float-l {
    float: left;
}

.float-r {
    float: right;
}

p {
    margin: 0;
}

.nowrap {
    white-space: nowrap;
}
// 太多循环的话 编译会导致卡顿或者内存溢出
// 太多循环的话 编译会导致卡顿或者内存溢出
// 太多循环的话 编译会导致卡顿或者内存溢出
.width-loop(@n, @i: 0) when (@i <=@n) {
    .w-@{i} {
        width:~"@{i}%";
    }
}
.width-loop(100);

.width-px-loop(@n, @i: 0) when (@i <=@n) {
    .w-px-@{i} {
        width:~"@{i}px";
    }

    .width-px-loop(@n, (@i + 5));
}

.width-px-loop(200);

.height-loop(@n, @i: 0) when (@i <=@n) {
    .h-@{i} {
        height:~"@{i}%";
    }
    .height-loop(@n, (@i + 1));
}

.height-loop(100);

.height-px-loop(@n, @i: 0) when (@i <=@n) {
    .h-px-@{i} {
        height:~"@{i}px";
    }

    .height-loop(@n, (@i + 5));
}

.height-px-loop(200);

.margin-loop(@n, @i: 0) when (@i <=@n) {
    .m-l-@{i} {
        margin-left:~"@{i}px";
    }
    .m-r-@{i} {
        margin-right:~"@{i}px";
    }
    .m-t-@{i} {
        margin-top:~"@{i}px";
    }
    .m-b-@{i} {
        margin-bottom:~"@{i}px";
    }
    .margin-loop(@n, (@i + 5));
}

.margin-loop(200);


.padding-loop(@n, @i: 0) when (@i <=@n) {
    .p-l-@{i} {
        padding-left:~"@{i}px";
    }
    .p-r-@{i} {
        padding-right:~"@{i}px";
    }
    .p-t-@{i} {
        padding-top:~"@{i}px";
    }
    .p-b-@{i} {
        padding-bottom:~"@{i}px";
    }

    .padding-loop(@n, (@i + 5));
}

.padding-loop(200);

.flex-loop(@n, @i: 1) when (@i <=@n) {
    .flex-@{i} {
        flex: @i;
    }

    .flex-loop(@n, (@i + 1));
}

.flex-loop(24);

.font-size-loop(@n, @i: 1) when (@i <=@n) {
    .fontSize-@{i} {
        font-size:~"@{i}px";
    }

    .font-size-loop(@n, (@i + 1));
}

.font-size-loop(50);

.text {
    &-left {
        text-align: left;
    }

    &-center {
        text-align: center;
    }

    &-right {
        text-align: right;
    }
    &-over-ellipsis {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.cursor {
  &-pointer {
      cursor: pointer;
  }  
}